<template>
  <div>
    <h1>生命周期函数</h1>
    <p @click="count++">count: {{ count }}</p>
  </div>
</template>

<script setup>
// 组合式api 中 使用 setup 代替 beforeCreated 和 created生命周期函数
// 特点: 所有的生命周期钩子函数添加前缀 on

import {
  onMounted,
  onBeforeMount,
  onBeforeUpdate,
  onUpdated,
  onUnmounted,
  onBeforeUnmount,
  ref,
} from "vue";

const count = ref(0);

onBeforeMount(() => {
  console.log("onBeforeMount");
});
onMounted(() => {
  console.log("onmounted");
});

onBeforeUpdate(() => {
  console.log("onBeforeUpdate");
});

onUpdated(() => {
  console.log("onUpdated");
});

onBeforeUnmount(() => {
  console.log("onBeforeUnmount");
});
onUnmounted(() => {
  console.log("onUnmounted");
});
</script>
<style scoped>
</style>